<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="formRef"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				
				<el-form-item class="flex-row-container">
                    <el-select
						v-model="queryData.cycleType"
						:placeholder="$t('common.please_choose')"
						style="width: 110px"
					>
						<el-option label="结算周期" :value="0"></el-option>
						<el-option label="实时查询" :value="1"></el-option>
					</el-select>
					<el-select
						v-model="billEndDate"
						placeholder="请选择"
			      style="width: 280px"
            :disabled="queryData.cycleType === 1"
					>
						<el-option
							v-for="item in billDateList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
                <el-form-item class="flex-row-container" label="代理账号">
                        <el-input
                            v-model="queryData.userName"
                            class="input-with-select"
                            :placeholder="$t('common.please_enter')"
                            clearable
                            size="medium"
                            style="width: 200px"
                            @input="forceUpdate"
                        >
                        </el-input>
				</el-form-item>

				<el-form-item class="flex-row-container">
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						type="warning"
						icon="el-icon-download"
						size="medium"
            v-if="hasPermission('90900061')"
						:loading="exportBtnLoading"
						@click="handleExportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				ref="elTable"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:max-height="tableHeight"
				:data="tableData"
				v-bind="$attrs"
				v-on="$listeners"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					v-for="(item, index) in newCol"
					:key="'column_' + index"
					:prop="newCol[index].prop"
					:align="item.alignCenter"
					:label="item.label"
					:min-width="item.minWidth"
					:fixed="item.isFixed"
					:sortable="item.isSortColumn"
					:show-overflow-tooltip="item.isShowTip"
				>   

          <el-table-column 
              v-if="item.columns" 
              v-for="(subItem, i) in item.columns" 
              :label="subItem.label"
              :align="item.alignCenter"
              :key="subItem.prop"
            >
              <template slot-scope="{ row, $index }">
                <div v-if="subItem.slot === 'numberSolt'">
                    {{
                        handleNumber(
                            'USDT',
                            row[subItem.prop],
                            2,
                            true,
                        )
                    }}
                </div>
					    </template>
         </el-table-column>
					<template slot="header" v-if="!item.columns">
						<span v-if="item.tipContent">
							{{ item.label }}
							<el-tooltip
								class="item"
								effect="dark"
								:content="item.tipContent"
								placement="top-start"
							>
								<i class="el-icon-question"></i>
							</el-tooltip>
						</span>
						<span v-else>
							{{ item.label }}
						</span>
					</template>


					<template slot-scope="{ row, $index }" v-if="!item.columns">
                            <div v-if="item.slot === 'numberSolt'">
                                {{
                                    handleNumber(
                                        'USDT',
                                        row[item.prop],
                                        2,
                                        true,
                                    )
                                }}
                            </div>
						<div v-if="item.slot === 'defaultSolt'">
							<span>
								{{
									row[newCol[index].prop] !== undefined &&
									row[newCol[index].prop] !== null
										? row[newCol[index].prop]
										: '-'
								}}
							</span>
						</div>
            <div v-if="item.slot === 'dateSolt'">
              <div v-if="queryData.cycleType === 1">
                  {{ row.date }}
              </div>
              <div v-else>
                {{ dayjs(	String(row.reportStDate)).format('YYYY-MM-DD') }} 
                ~
                {{ dayjs(	String(row.reportEnDate)).format('YYYY-MM-DD') }} 
              </div>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size.sync="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>

	
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { getColumns } from './components/columns'
import MainContent from '@/components/MainContent/index.vue'

export default {
  components: {
    MainContent,

  },
  mixins: [list],
  data() {
    return {
      dayjs,
      tableHeight: 480,
      otherDependenComponents: [],
      billEndDate: undefined,
      queryData: {
        countType: 1,
        userName: undefined,
        queryType: 1,
        cycleType: 0,
      },
      tableData: [],
      billDateList: [],
      loading: false,
      exportBtnLoading: false,
      amountDialog: {
        name: '',
        visible: false,
        row: {}
      }
    }
  },
  created() {
    this.newCol = getColumns()
  },
  mounted() {
    this.getSettlementBillTimeList()
  },
  methods: {
	  // 改变列表条数
    handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadDataFetch()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadDataFetch()
		},
    dialogData(row, col) {
      const dialogNames = {
        shouldRebateAmount: 'PeriodSholdSentRebateDialog',
        realRebateAmount: 'PeriodRealHairRebateDialog',
        invalidRebateAmount: 'PeriodRejectRebateDialog'
      }
      this.amountDialog = {
        name: dialogNames[col.prop],
        row: row,
        visible: true
      }
    },
    forceUpdate(value) {
      this.$forceUpdate()
      this.queryData.userName = this.queryData.userName.replace(
        /[^A-Za-z0-9]/g,
        ''
      )
    },
    getSettlementBillTimeList() {
      this.loading = true
      const params = {
        pageNum: 1,
        pageSize: 200,
        periodType:5
      }
      this.$api
        .proxyTeamBillPeriod(params)
        .then((res) => {
          this.loading = false
          if (res?.code === 200) {
            const { record } = res?.data
            this.billDateList = record.map(
              (item, index) => {
                const startTime = dayjs(String(item.periodStDate)).format('YYYY-MM-DD')
                const endTime = dayjs(String(item.periodEnDate)).format('YYYY-MM-DD')
                return {
                  code: index,
                  description: `${startTime} 至 ${endTime}`,
                  periodStDate: item.periodStDate,
                  periodEnDate: item.periodEnDate,
                  periodStStr: startTime,
                  periodEnStr: endTime
                }
              }
            )
            this.billEndDate = 0
            this.loadDataFetch()
          }
        })
        .catch(() => {
          this.loading = false
        })
    },

    loadDataFetch() {
      const params = {
        ...this.queryData,
        ...this.getParams(),
	
      }

      if (params.cycleType === 0) {
        if (this.billEndDate === undefined) return
        params.cycleEndDate = this.billDateList[this.billEndDate].periodEnDate
        params.cycleStartDate = this.billDateList[this.billEndDate].periodStDate
      }
      this.loading = true
      
      this.$api
        .reportNetAssertList(params)
        .then((res) => {
          this.loading = false
          if (res.code === 200) {
            this.tableData = res?.data?.record || []
            this.total = res?.data?.totalRecord || 0
          }
        })
        .catch(() => {
          this.tableData  = []
          this.loading = false
        })
    },
    search() {
      this.pageNum = 1
      this.loadDataFetch()
    },
    reset() {
      this.pageNum = 1
      this.queryData = {
        countType: 1,
        userName: undefined,
        queryType: 1,
        cycleType: 0,
      }
      this.billEndDate = 0
      this.loadDataFetch()
    },
    handleExportExcel() {
      const params = {
        ...this.queryData,
      }
	
      if (params.cycleType === 0) {
        if (this.billEndDate === undefined) return
        params.cycleEndDate = this.billDateList[this.billEndDate].periodEnDate
        params.cycleStartDate = this.billDateList[this.billEndDate].periodStDate
      }
      
      this.exportBtnLoading = true
      this.exportExcelPublic({
        api: 'reportNetAssertExport',
        params
      }).finally(() => {
        this.exportBtnLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .is-group th {
	background-color: #f5f7fa !important;
}
::v-deep .el-icon-question:after {
	font-size: 16px;
	margin-left: 0;
}
::v-deep .el-table th.el-table__cell > .cell {
	text-align: center;
}
</style>